<template>
  <GlobalLoading :show="loading" />
  <MessageToast
    :show="messageState.show"
    :message="messageState.message"
    :type="messageState.type"
    :duration="messageState.duration"
    @close="hideMessage"
  />
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import GlobalLoading from './components/GlobalLoading.vue'
import MessageToast from './components/MessageToast.vue'
import { useMessage } from './composables/useMessage'

const loading = ref(false)
const router = useRouter()
const { messageState, hideMessage } = useMessage()

// 路由切换时显示 loading
router.beforeEach((to, from, next) => {
  loading.value = true
  next()
})
router.afterEach(() => {
  setTimeout(() => { loading.value = false }, 300) // 延迟消除loading更自然
})
</script>

<style>
body {
  font-family: Arial, sans-serif;
}
</style> 